﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReportDetial.aspx.cs" Inherits="Page_Customer_ReportDetial" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <title>报告详情</title>
    <style>
        .report-detail .report-item {
            margin-bottom: .312rem;
            background: #fff;
        }

        .report-item-title {
            border-bottom: #e5e5e5 1px solid;
            line-height: 1.093rem;
        }

        .report-detail .report-item-title > div:last-of-type {
            margin: 0.7rem .468rem;
        }

        .report-item-title img {
            display: inline-block;
            width: 1.3rem;
            margin: 0 .156rem 0 .281rem;
            vertical-align: middle;
        }

        .report-item-name {
            color: #f38321;
            vertical-align: middle;
        }

        .fs-26px {
            font-size: 1.3rem;
        }

        .report-detail .report-item .data-card-tr {
            font-size: 0;
        }

        .data-card-tr {
            margin: 4px .468rem;
            line-height: 1.9rem;
            font-size: 0.99rem;
            border-bottom: 1px solid #e5e5e5;
        }

        .report-detail .data-tr-son:nth-child(odd) {
            width: 47%;
        }

        .report-detail .data-tr-son {
            display: inline-block;
            vertical-align: middle;
        }

        .fs-24px {
            font-size: 0.99rem;
        }

        .data-card-th {
            color: #666;
            min-width: 1.88rem;
        }

        span {
            display: inline-block;
        }

        .data-card-td {
            color: #333;
        }

        span {
            display: inline-block;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .report-detail .report-table {
            margin: 0 .468rem .468rem;
            border-radius: .125rem;
            overflow: hidden;
            box-shadow: 0 0.093rem 0.281rem 0.093rem #ddd;
        }

            .report-detail .report-table .report-table-title {
                background: #4fc0e8;
                color: #fff;
                line-height: 2.6rem;
                text-align: center;
            }

        .report-detail .report-table-content {
            background: #fff;
            padding: .28rem 0;
        }

            .report-detail .report-table-content .data-card-tr {
                font-size: 0;
            }

            .report-detail .report-table-content div {
                padding: 0 .484rem;
            }

        .data-card-tr {
            margin: 0 .468rem;
            line-height: 2.024rem;
            border-bottom: 1px solid #e5e5e5;
        }

        .report-detail .report-table-content span {
            width: 33.3%;
            text-align: center;
            vertical-align: middle;
            line-height: initial;
            font-size: 0.9rem;
        }

        .report-detail .report-table-content div {
            padding: 5px .484rem;
            font-size: .415rem;
        }

        .report-detail .report-tr-box {
            color: #f38321;
        }

        .report-detail .report-table-content span em {
            word-break: break-all;
        }

        .warp-text {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .report-detail .report-table-content span img {
            position: absolute;
            padding-left: .034rem;
            width: .56rem;
            right: 0;
            top: 50%;
            transform: translate(0,-50%);
        }

        img {
            border: 0;
        }

        .report-detail .report-table-content span:nth-of-type(2) {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="report-detail">
        <%if (reportModel != null)
            {%>
        <div class="report-item">
            <div class="report-item-title ">
                <div>
                    <img src="../../Images/xhImg/report1.png" />
                    <span class="report-item-name fs-26px ng-binding"><%=reportModel.ReportName %></span>
                </div>
            </div>

            <div class="data-card-tr">
                <div class="data-tr-son fs-24px">
                    <span class="data-card-th">姓名：</span>
                    <span class="data-card-td ng-binding"><%=reportModel.PatiName %></span>
                </div>
                <div class="data-tr-son fs-24px">
                    <span class="data-card-th">年龄：</span>
                    <span class="data-card-td ng-binding"><%=reportModel.Age %></span>
                </div>
            </div>

            <div class="data-card-tr">
                <div class="data-tr-son fs-24px">
                    <span class="data-card-th">性别：</span>
                    <span class="data-card-td ng-binding"><%=reportModel.SexName %></span>
                </div>

                <div class="data-tr-son fs-24px">
                    <span class="data-card-th">送检日期：</span>
                    <span class="data-card-td ng-binding"><%=reportModel.ReportDate %></span>
                </div>
            </div>

        </div>
        <% } %>
        <div class="report-table">
            <div class="report-table-title fs-28px">报告结果</div>
            <%if (reportModel.ReportDetillList != null && reportModel.ReportDetillList.Count > 0)
                { %>
            <div class="report-table-content  ng-scope">
                <div class="data-card-tr">
                    <span>项目</span>
                    <span>检查结果</span>
                    <span>参考值</span>
                </div>
                <div class="report-tr-box">
                    <%foreach (var item in reportModel.ReportDetillList)
                        {%>
                    <div class="data-card-tr ng-scope">
                        <span class="ng-binding"><%=item.SampleName %></span>
                        <span>
                            <em class="warp-text ng-binding"><%=item.CurrentResult %></em>
                        </span>
                        <span class="warp-text ng-binding"><%=item.ReportLimit %></span>
                    </div>
                    <% } %>
                </div>
            </div>
            <%} %>
        </div>
    </div>
</body>
</html>
